<template>
	<view class="page">
		<navigator :url="`/pages/kind/goods?id=` + item.id" class="top" v-for="item in kindlist1">
			<view class="ch">{{item.ctitle}}</view>
			<view class="en">{{item.etitle}}</view>
			<image :src="item.img" ></image>
		</navigator>
		<view class="box">
			<navigator :url="`/pages/kind/goods?id=` + item.id" class="bottom" v-for="item in kindlist2">
				<image :src="item.img"></image>
				<view class="ch">{{item.ctitle}}</view>
				<view class="en">{{item.etitle}}</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import { kindlist } from '../../api/kind/index.js'
	export default {
		data() {
			return {
				kindlist1:[],
				kindlist2:[],
			};
		},
		methods:{
			getkind(){
				kindlist()
				.then(res =>{
					console.log(res);
					for(var i=0;i<res.data.data.length;i++){
						if(i<2){
							this.kindlist1.push(res.data.data[i])
						}else{
							this.kindlist2.push(res.data.data[i])
						}
					}
					// console.log(this.kindlist1)
				})
			}
		},
		onLoad(){
			this.getkind()
		}
	}
</script>

<style lang="scss" scoped>
.page{
	padding-top: var(--status-bar-height);
	background-color: #f0ebe6;
	padding: 10px 0;
	.top{
		position: relative;
		width: 335px;
		height: 151px;
		background-color: #D5D5D5;
		margin: 28px 20px;
		border-radius: 20px;
		&:nth-child(2){
			background-color: #fff;
		}
		.ch{
			position: absolute;
			left: 20px;
			bottom: 50px;
			font-size: 24px;
			color: #3E3E3E;
		}
		.en{
			position: absolute;
			left: 20px;
			bottom: 30px;
			font-size: 15px;
			color: #3E3E3E;
		}
		image{
			position: absolute;
			top: 0;
			right: 0;
			width: 201px;
			height: 151px;
		}
	}
	.box{
		width: 335px;
		height: 221px;
		display: flex;
		justify-content: space-between;
		margin: 0 20px 24px;
		.bottom{
			position: relative;
			width: 156px;
			height: 221px;
			image{
				width: 100%;
				height: 100%;
			}
			.ch{
				position: absolute;
				left: 20px;
				top: 70px;
				font-size: 24px;
				color: #3E3E3E;
			}
			.en{
				position: absolute;
				left: 20px;
				top: 110px;
				font-size: 15px;
				color: #3E3E3E;
			}
		}
	}
}

</style>
